<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <!-- <img src="../../assets/logo.png" alt=""> -->
      </div>
      <!-- 登录表单 -->
      <!-- V-model是双向绑定； :model=v-bind:model只是将父组件中的数据传到子组件 -->
      <!-- ref：拿到实例对象 -->
      <el-form ref="modifyPwdFormRef" :model="modifyPwdForm" :rules="modifyPwdFormRules" label-width="0px" class="login_form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="modifyPwdForm.username"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input v-model="modifyPwdForm.password" :type="passwordType">
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="passwords">
          <el-input v-model="modifyPwdForm.passwords" :type="passwordType">
          </el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input v-model="modifyPwdForm.code"></el-input>
          <el-button type="success" @click="getCode">获取验证码</el-button>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btns">
          <!-- <a href="/register" class="fl">无账号？去注册</a> -->
          <el-button type="primary" @click="modifyPwd">确认修改</el-button>
          <el-button type="info" @click="resetModifyPwdForm">重置</el-button>
        </el-form-item>
        <!-- <el-form-item class="clearfix" style="margin:0;">
          <a href="/register" class="fl">无账号？去注册</a>
          <el-button type="text" @click="modifyPwdDialogVisible=true" class="fr">忘记密码？</el-button>
        </el-form-item> -->
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    // 验证用户名
    let validateUsername = (rule, value, callback) => {
      this.$store.dispatch('validateEmail',{rule, value, callback})
    };
    // 验证密码
    let validatePassword = (rule, value, callback) => {
      this.$store.dispatch('validatePassword',{rule, value, callback})
    };
    // 验证重复密码
    let validatePasswords = (rule, value, callback) => {
      // this.$store.dispatch('validatePasswords',{rule, value, callback})
      if (stripscript(value) === "") {
        callback(new Error("请再次输入密码"));
      } else if (stripscript(value) != this.registerForm.password) {
        callback(new Error("重复密码不正确"));
      } else {
        callback();
      }
    };
    // 验证验证码
    let validateCode = (rule, value, callback) => {
      this.$store.dispatch('validateCode',{rule, value, callback})
    };
    return {
      // 添加修改密码的表单数据
      modifyPwdForm: {
        username: 'admin@qq.com',
        password: '123456admin',
        passwords: '123456admin',
        code:''
      },
      // 添加表单的验证规则对象，当鼠标失去焦点时，validator验证就会调用一次函数，并给函数传参
      modifyPwdFormRules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        passwords: [{ validator: validatePasswords, trigger: "blur" }],
        code: [{ validator: validateCode, trigger: "blur" }]
      }
    }
  },
  methods: {
    // 重置表单
    resetLoginForm () {
      this.$refs.modifyPwdFormRef.resetFields()
    },
    // 获取验证码
    getCode(){

    },
    // 修改密码
    modifyPwd(){
      
    }
  }
}
</script>